<template>
  <el-menu
    :default-active="currentIndex"
    :collapse="isCollapse"
    :mode="mode"
    router
    class="el-menu-demo"
    :text-color="textColor"
    :active-text-color="activeTextColor"
    :unique-opened="uniqueOpen"
    @select="handleMenuSelect"
  >
    <sub-menu
      :menu="menu"
      v-for="menu in menus"
      :key="menu.id"
      :iconStyle="iconStyle"
      :is-collapse="isCollapse"
      :currentIndex="currentIndex"
      :subTitleStyle="subTitleStyle"
      :subItemTitleStyle="subItemTitleStyle"
    ></sub-menu>
  </el-menu>
</template>
<script>
import subMenu from "./sub-menu";
import { mapGetters } from "vuex";
export default {
  name: "navMenu",
  props: {
    menus: Array,
    currentIndex: {
      type: String,
      default: "1"
    },
    isCollapse: {
      type: Boolean,
      default: false
    },
    uniqueOpen: {
      type: Boolean,
      default: false
    },
    subItemTitleStyle: {
      type: String,
      default: "font-size: 16px;"
    },
    subTitleStyle: {
      type: String,
      default: "font-size: 16px;"
    },
    iconStyle: {
      type: String,
      default: "font-size: 12px;width: 14px;"
    },
    mode: {
      type: String,
      default: "horizontal"
    },
    background: {
      type: String,
      default: "#20af83"
    },
    textColor: {
      type: String,
      default: "#fff"
    },
    activeTextColor: {
      type: String,
      default: "#ffd04b"
    }
  },
  created() {
      console.log(this.menu);
  },
  mounted() {},
  data() {
    return {};
  },
  computed: {
    // ...mapGetters({
    //   currentIndex: "currentIndex"
    // })
  },
  methods: {
    handleMenuSelect(index, indexPath) {
      this.$emit("select", index, indexPath);
    }
  },
  components: {
    subMenu
  }
};
</script>

<style scoped lang="scss">
@import "../../styles/vars";
.menu {
  background-color: $color-primary;
}
.el-menu--collapse {
  width: 70px;
}
.el-menu-demo {
  overflow: auto;
}
</style>
